<template>
	<div class="query">
		<div class="check">
			<div class="c_left">条件搜索栏</div>
			<div class="c_right clear">
				<div class="fl">
					<span class="c_tip">药师</span>
					<input type="text" class="c_input" v-model="yssrm" placeholder="请输入药师">
				</div>
				<div class="fl">
					<span class="c_tip">科室</span>
					<input type="text" class="c_input" v-model="kssrm" placeholder="请输入科室">
				</div>
				<div class="fl" style="margin-left:10px;">
					<el-button type="danger" class="btn_clear" @click="clearFun">清空</el-button>
					<el-button type="primary" class="btn_clear" @click="searchFun">查询</el-button>
				</div>
			</div>
		</div>
		<div class="list_tip clear">
			<!-- <span class="fl">数据管理列表</span> -->
		</div>
		<div class="table_box">
			<Departlist :search.async="search"></Departlist>
		</div>
	</div>
</template>

<script>
	import Departlist from "../components/departList"

	export default {
		components:{Departlist},
		data () {
			return {
				yssrm:"",
				kssrm:"",
				search:{
					yssrm:"",
					kssrm:""
				}
			}
		},
		methods:{
			clearFun(){
				this.search={
					yssrm:"",
					kssrm:""
				}
			},
			searchFun(){
				this.search={
					yssrm:this.yssrm,
					kssrm:this.kssrm
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	body{
		background:#e6edf5;
	}
	.query{
		width:100%;
		height:100%;
		background:#e6edf5;
		.check{
			font-size:12px;
			display:flex;
			line-height:60px;
			background:#fff;
			text-align:center;
			.c_left{
				width:115px;
				float:left;
			}
			.c_right{
				overflow:hidden;
				color:#636365;
				border-left:1px solid #e6edf5;
				.c_tip{
					display:inline-block;
					width:100px;
					padding-right:10px;
					text-align:right;
				}
				.c_input{
					width:150px;
					height:40px;
					border:1px solid #dcdfe6;
					border-radius:4px;
					padding-left:5px;
				}
				.c_input::-webkit-input-placeholder {
					color: #dcdfe6;
				}
				.c_input::-ms-input-placeholder {
					color: #dcdfe6;
				}
				.c_input::-moz-input-placeholder {
					color: #dcdfe6;
				}
				.c_search{
					width:100px;
				}
				.c_searchbtn{
					display:inline-block;
					width:42px;
					height:25px;
					margin-left:4px;
					background:#28a4f4;
					color:#fff;
					font-size:12px;
					text-align:center;
					line-height:26px;
					border-radius:6px;
					cursor:pointer;
				}
				.c_checkbox{
					width:230px;
					height:40px;
					display:inline-block;
					margin-left:-12px;
				}
				.btn_clear{
					padding:0;
					width:70px;
					height:40px;
					line-height:40px;
				}
			}
		}
		.list_tip{
			font-size:14px;
			color:#29a4f2;
			padding:10px 18px;
		}
		.table_box{
			padding:0 18px;
		}
	}
	.el-checkbox__label{
		padding-left:5px;
	}
	.el-checkbox{
		margin-right:10px;
	}
	.el-form-item{
		margin-bottom:5px;
	}
	.departSearch{
		text-align:left;
		line-height:50px;
		.fl{
			margin-right:30px;
		}
	}
</style>
